<template>
  <div>
    <!-- readonly  shallowReadonly -->
    <h1>{{ obj.a }}</h1>
    <h1>{{ obj.b.c }}</h1>
    <button @click="getValue">按钮</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, readonly, shallowReadonly } from "vue";

export default defineComponent({
  setup() {
    const obj = reactive({
      a: 1,
      b: {
        c: 2,
      },
    });
    // readonly只读属性 只能读不能更改
    const roObj = readonly(obj);
    // shallowReadonly 第一次只读不能更改，第二层第三次，是能更改
    const soObj = shallowReadonly(obj);
    const getValue = () => {
      console.log(obj.a);
      console.log(obj.b.c);
      console.log(roObj.a);
      // roObj.a++;
      // roObj.b.c++;
      // soObj.a++;
      soObj.b.c++;
    };
    // 今天上午作业 复习vue2和vue3对应的知识点， 没事， 写一个获取屏幕上的点的案例 xy
    return {
      obj,
      getValue,
    };
  },
});
</script>

<style scoped>
</style>